<template>
    <div>
        <header>
            <div><label>地区</label>
                <el-select v-model="value" placeholder="请选择">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div><label>区域</label>
                <el-select v-model="value" placeholder="请选择">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div>
                <el-button type="primary">查看二维码</el-button>
                <el-button type="success">查看所有地区列表</el-button>
                <el-switch
                        v-model="value2"
                        active-color="#409EFF"
                        inactive-color="#909399"
                        active-text="自动监控">
                </el-switch>
            </div>
        </header>
        <main>
            <el-tag>*提示：图片区域范围内鼠标右键新建区域</el-tag>
            <img src="" style="width: 1200px;height: 675px;">
        </main>
    </div>
</template>

<script>
    export default {
        name: "Region",
        data() {
            return {
                value1: true,
                value2: true,
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                value: ''
            }
        }
    }
</script>

<style scoped>
    header > div {
        float: left;
    }

    label {
        font-size: 24px;
        margin-bottom: 10px;
        padding-bottom: 10px;
    }

    main {
        position: relative;
        width: 95%;
        left: 5%;
    }

    .el-tag {
        position: absolute;
        top: 0;
        left: 0;
    }
</style>